import { Divider, List, Popover } from "antd";
import styled from "@emotion/styled";
import { useUsers } from "../hooks/useUsers";

const Wrapper = styled.div`
  min-width: 30rem;
`;

export const UserPopover = () => {
  const { data: users } = useUsers();
  const content = (
    <Wrapper>
      <Divider orientation="left">组员列表</Divider>
      <List
        split={false}
        dataSource={users||undefined}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta title={item.name} />
          </List.Item>
        )}
      />
      <Divider />
    </Wrapper>
  );
  return (
    <Popover content={content}>
      <div style={{cursor: "pointer"}}>组员</div>
    </Popover>
  );
};
